CSS Tables

Table Example

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France

Table Border

This table uses a border:

First Name Last Name
Peter Griffin
Lois Griffin

This table uses a width of 100%:

First Name Last Name
Peter Griffin
Lois Griffin

This table has collapsed border:

First Name Last Name
Peter Griffin
Lois Griffin

Table Alignment

This table has all elements center aligned:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

This table has all elements left aligned:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

This table has its data elements bottom aligned:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Table Style

This table has a 15px padding:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

This table has horizontal dividers:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

This table has change color properties when hovered:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

This table has striped layers:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

Table Responsive

This is ideal for long tables in x or y directions. Below is an example of a table with long data for x-direction.

Fancy Table
First Name Last Name Points
Jill Smith 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67